<!--
 * @Author: your name
 * @Date: 2020-10-28 21:23:44
 * @LastEditTime: 2020-10-29 20:31:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \就业班练习d:\桌面\ma-pc\src\views\AddArticle\EditArticle.vue
-->
<!--
 * @Author: your name
 * @Date: 2020-10-26 11:16:25
 * @LastEditTime: 2020-10-28 21:17:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \就业班练习d:\桌面\ma-pc\src\views\AddArticle\index.vue
-->
<template>
  <div class="publish-container">
    <el-card>
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/articles'}">文章管理</el-breadcrumb-item>
          <el-breadcrumb-item>编辑文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="form" :rules="rules" :model="article" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="article.title"></el-input>
        </el-form-item>
        <el-form-item label="内容：" prop="content">
          <quill-editor v-model="article.content" :options="editorOption"></quill-editor>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="article.cover.type">
            <!-- 根据后端接口约定 -->
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="cover-group" style="margin-bottom:10px">
          <Cover :picUrl.sync="url1" v-if="article.cover.type>0"></Cover>
          <Cover :picUrl.sync="url2" v-if="article.cover.type===3"></Cover>
          <Cover :picUrl.sync="url3" v-if="article.cover.type===3"></Cover>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="article.channel_id" placeholder="请选择活动区域" @focus="hGetChannels" >
            <el-option
              v-for="channel in channels"
              :key="channel.id"
              :label="channel.name"
              :value="channel.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="hEditArticle(false)">修改</el-button>
          <el-button @click="hEditArticle(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getChannels, hGetArticle, editArticle } from '@/api/addArticle'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Cover from '@/views/AddArticle/Cover.vue'
export default {
  // name: 'AddArticle',
  data () {
    return {
      url1: '', // 单图状态
      url2: '', // 双图状态
      url3: '', // 三图状态
      channels: [],
      currentId: this.$route.query.id,
      article: {
        // 文章数据
        title: '', // 文章标题
        content: '', // 文章内容
        cover: {
          type: 0, // 封面图片的张数
          images: [] // 封面的地址
        },
        channel_id: '' // 频道id
      },
      rules: {
        // 标题的验证规则
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在5到30之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 20, max: 30000, message: '最少20个字', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择文章频道', trigger: 'blur' }
        ]
      },
      editorOption: {
        // 富文本配置
        placeholder: '', // 占位文字
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  methods: {
    hGetChannels () { // 获取频道列表
      getChannels().then(res => {
        this.channels = res.data.data.channels
      })
    },
    /**
     * @description: 发布文章
     * @param {Blooen} draft true是草稿 false 是发布
     */
    hEditArticle (draft) {
      this.$refs.form.validate(valid => {
        if (valid) { // 如果验证通过
          this.upCover()
          editArticle(this.currentId, { draft }, this.article).then(res => {
            this.$message({ type: 'success', message: '修改文章成功' })
            this.$router.push({
              path: '/articles'
            })
          })
        } else {
          return false
        }
      })
    },
    upCover () {
      switch (this.article.cover.type) {
        case 1:
          console.log(1)
          this.article.cover.images = [this.url1]
          break
        case 3:
          console.log(3)
          this.article.cover.images = [this.url1, this.url2, this.url3]
          break
      }
    },
    hGetAtc () {
      hGetArticle(this.currentId).then(res => {
        this.hGetChannels()
        this.article = res.data.data
        if (this.article.cover.type === 1) {
          this.url1 = this.article.cover.images[0]
        } else if (this.article.cover.type === 3) {
          this.url1 = this.article.cover.images[0]
          this.url2 = this.article.cover.images[1]
          this.url3 = this.article.cover.images[2]
        }
      })
    }
  },
  mounted () {
    this.hGetAtc()
  },
  components: {
    quillEditor, // 注册组件
    Cover
  }
}
</script>
